<template>
	<view class="zh-service-link" catchtouchmove="true">
		<u-mask :show="props.show" @click="handleClickMask"></u-mask>
		<view class="service-link-box" v-if="props.show">
			<view class="top">
				<image :src="IMG_URL + '/auth/service_qr_code.png'" class="service-qr-code"/>
			</view>
			<view class="bottom">
				<view>
					<text class="font-36 font-bold text-center">扫一扫二维码，添加客服微信</text>
				</view>
				<view class="mt-60">
					<button class="app-reset-button" :style="buttonStyle" @click="saveQrCode">保存到相册</button>
				</view>
				<view class="mt-40">
					<button class="app-primary-button" hover-class="app-primary-button-active" :style="buttonStyle" @click="link">联系TA</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts" >
	import { tip, system } from '@/utils'
	
	const props = defineProps<{
		show:boolean
	}>()
	import { IMG_URL } from '@/utils/constant'
	
	const emit = defineEmits(['close','link','save'])
	
	const buttonStyle = {
		width:uni.upx2px(446) + 'px'
	}
	const handleClickMask = () => {
		emit('close')
	}
	
	const saveQrCode = () => {
		const url: string = IMG_URL + '/auth/service_qr_code.png'
		system.downLoadImg(url).then(() => {
			emit('save')
		})
	}
	
	const link = () => {
		emit('link')
	}
	
	const movestop = () => {
		
	}
</script>

<style  lang="scss" scoped>
	.zh-service-link {
		.service-link-box {
			z-index:2;
			width: 670rpx;
			height: 860rpx;
			position:fixed;
			top:200rpx;
			left:40rpx;
			right:40rpx;
			border-radius: 8px;
			overflow:hidden;
			.top {
				width:670rpx;
				height:430rpx;
				background: linear-gradient(90deg, #1769FF, #3795FF);
				text-align: center;
				.service-qr-code {
					width: 280rpx;
					height: 280rpx;
					border-radius: 8rpx;
					margin:80rpx auto 0rpx;
				}
			}
			.bottom {
				text-align: center;
				background-color: $uni-bg-card-color;
				padding:40rpx;
			}
		}
	}
</style>
